<template>
    <div>
       <!-- 卡片框 -->
      <el-card class="box-card">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home_Ad' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>公告管理</el-breadcrumb-item>
      </el-breadcrumb>
        <!-- 搜索框 -->
        <div class="searchBox">
             <!-- 添加按钮 -->
            <div class="addUserBox" >
                <el-button  type="success" icon="el-icon-circle-plus-outline" @click="isShowAddNotice = true">发布公告</el-button>
            </div>
            <el-input
            placeholder="请输入关键词"
            v-model="query"
            clearable style="width:500px;margin-right:5px">
            </el-input>
            <el-button  type="primary" icon="el-icon-search" @click="search">查找</el-button>
        </div>
        <!-- 添加公告对话框 -->
            <el-dialog width="600px" title="发布公告" :visible.sync="isShowAddNotice">
             <el-form ref="addNoticeFormRef"  label-width="80px" :model="addNoticeForm" :rules="rules">
                <el-form-item label="公告标题" prop="title">
                    <el-input v-model="addNoticeForm.title"></el-input>
                </el-form-item>
                 <el-form-item label="公告内容" prop="content">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 6, maxRows: 6}"
                    placeholder="请输入内容"
                    v-model="addNoticeForm.content">
                  </el-input>
                </el-form-item>
                 <el-form-item class="formBtnBox"> 
                    <el-button type="primary" @click="addNotice">发布</el-button>
                    <el-button  @click="closeAddDialog">取消</el-button>
                </el-form-item>
                
             </el-form>
          </el-dialog>
        <!-- 编辑球馆对话框 -->
            <el-dialog width="600px" title="编辑球馆信息" :visible.sync="isShowEditNotice">
             <el-form ref="editNoticeFormRef"  label-width="80px" :model="editNoticeForm" :rules="rules">
                <el-form-item label="公告标题" prop="title">
                    <el-input v-model="editNoticeForm.title"></el-input>
                </el-form-item>
                 <el-form-item label="公告内容" prop="content">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 6, maxRows: 6}"
                    placeholder="请输入内容"
                    v-model="editNoticeForm.content">
                  </el-input>
                </el-form-item>
          

             
                 <el-form-item class="formBtnBox"> 
                    <el-button type="primary" @click="editNotice">保存</el-button>
                    <el-button  @click="closeEditDialog">取消修改</el-button>
                </el-form-item>
                
             </el-form>
        </el-dialog>
        <!-- 表格区域 -->
           <el-table
            :data="noticeList"
            border stripe fit
            empty-text='null'
            class="userTable"
            style="width: 100%;margin-top:12px">
            <el-table-column type="index" label="#" width="30"></el-table-column>
            <el-table-column prop="nId" label="公告编号" width="100"></el-table-column>
            <el-table-column prop="title" label="公告标题" width="180">
            </el-table-column>
            <el-table-column prop="dateTime"  label="发布时间" width="300">
            </el-table-column>
        
             <el-table-column  label="操作" width="">
                 <template slot-scope="scope">
                         <el-button type="primary" icon="el-icon-edit" size="medium" @click="showEditDialog(scope.row)">查看/编辑公告</el-button>
                         <el-button type="danger"  icon="el-icon-delete" size="medium" @click="removeNotice(scope.row.nId)">删除</el-button>   
                 </template>
            </el-table-column>
            

           </el-table>
      </el-card>
    </div>
</template>

<script>
import {mapGetters} from 'vuex';
export default {
    data() {
        return {
            // 公告数据列表
            noticeList:[],
            // 添加公告表单
            addNoticeForm:{
                title:'',
                content:''
            },
            // 编辑公告信息的表单
            editNoticeForm:{
                title:'',
                content:'',
                nId:''
            },
            // 关键字
            query:'',
            // 控制添加对话框是否显示
            isShowAddNotice:false,
            // 控制编辑对话框是否显示
            isShowEditNotice:false,
            // 验证表单规则配置
             rules:{
                title:[{ required: true, message: '请输入标题', trigger: 'blur' }],
                content:[{ required: true, message: '请输入公告内容', trigger: 'blur' }],
                 
            },
        }
    },
    methods: {
        // 获取所有球馆信息
        async getNoticeData(){
                 this.$store.dispatch('getNoticeData').then(ok=>{
                     if(ok){
                         this.noticeList = this.noticeListData;
                     }
                 });
                
        },
        // 发布公告的回调
        addNotice(){
             // 验证表单
             this.$refs.addNoticeFormRef.validate(async valid=>{
                 if(!valid) return;
                 this.$store.dispatch('addNotice',this.addNoticeForm).then(ok=>{
                     if(ok){
                          this.$message.success('公告发布成功');
                          this.closeAddDialog();
                          this.getNoticeData();
                     }
                 },err=>{
                     if(err){
                          this.$message.error('公告发布失败')
                     }
                 })
             })
        },
        // 关闭发布公告对话框回调
        closeAddDialog(){
            this.isShowAddNotice = false;
            this.addNoticeForm.title ='';
            this.addNoticeForm.content = '';
        },
        // 关闭编辑公告对话框回调
        closeEditDialog(){
            this.isShowEditNotice = false;
            this.$refs.editNoticeFormRef.resetFields();
        },
        // 显示编辑公告对话框
        showEditDialog(notice){
            this.editNoticeForm.title = notice.title;
            this.editNoticeForm.content = notice.content
            this.editNoticeForm.nId = notice.nId;
            this.isShowEditNotice = true;
        },
        // 保存编辑公告回调
        editNotice(){
              // 验证表单
             this.$refs.editNoticeFormRef.validate(async valid=>{
                 if(!valid) return;
                 this.$store.dispatch('editNotice',this.editNoticeForm).then(ok=>{
                     if(ok){
                          this.$message.success('已保存修改');
                          this.closeEditDialog();
                          this.getNoticeData();
                     }
                 },err=>{
                     if(err){
                          this.$message.error('修改失败')
                     }
                 })
             })
           
        },
        // 删除公告回调
           async removeNotice(nId){
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            showCancelButton:true,
            cancelButtonText: '取消',
            type: 'warning'
            }).then(async() => {
                    this.$store.dispatch('deleteNotice',nId).then(ok=>{
                        if(ok){
                          this.$message.success('已删除该公告');
                          this.getNoticeData();
                        }
                    })
            
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        
        },
       
    },
    
    watch:{
      query(newVal,oldVal){
        if(newVal === '' && oldVal!== ''){
            this.getStadiumData();
       }
      }
    },
    computed:{
        ...mapGetters({noticeListData:'noticeList'})
    },
    created() {
        this.getNoticeData();
    },  
    }
</script>

<style scoped lang="less">
   .searchBox{
        margin-top: 20px;
        display: flex;
        
    }
    .addUserBox{
        margin-right: 50px;
    }
    .avatarBox{
      width: 160px;
      height: 170px;
      >img{
         width: 100%;
         height: 100%;  
      }
      .avatar-uploader{
         height: 200px;
         .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
      }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 120px;
            height: 120px;
            line-height: 178px;
            text-align: center;
            border:1px solid #ddd
        }
     .title{
      text-align: center;
      color: #606266;
      }
      border-radius: 5px;
      margin-right: 30px;
      margin-left: 50px;
      overflow: hidden;
      
  }
</style>